<template>
  <a class="goods-item" @click="goodsClick">
    <img v-lazy="showImage" alt="goodsItem.title" @load="imgLoad" />
    <div class="goods-info">
      <p class="goods-title">{{goodsItem.title}}</p>
      <div class="bot_box clearfix">
        <p class="p_price fl">{{goodsItem.orgPrice}}</p>
        <p class="p_feed fr">{{goodsItem.cfav=='0'?'暂无收藏':goodsItem.cfav}}</p>
      </div>
    </div>
  </a>
</template>

<script>
export default {
  name: "goods-item",
  props: {
    goodsItem: {
      type: Object,
      default() {
        return {};
      }
    }
  },
  computed: {
    showImage() {
      return (
        this.goodsItem.img || this.goodsItem.image || this.goodsItem.show.img
      );
    }
  },
  methods: {
    imgLoad() {
      // 为事件总线添加一个事件
      this.$bus.$emit("goodsItemImgLoad");
    },
    goodsClick() {
      // 跳转到详情页
      this.$router.push("/detail/" + this.goodsItem.iid);
    }
  }
};
</script>

<style scoped>
.goods-item {
  float: left;
  display: block;
  width: 47%;
  margin: 2% 0 0 2%;
  background: #fff;
  border-radius: 3px;
  overflow: hidden;
  font-size: 12px;
}
.goods-item img {
  display: block;
  width: 100%;
  height: 235px;
  background-color: #fff;
}
.goods-title {
  margin: 6px 9px 3px 5px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.bot_box {
  margin: 8px 5px 3px;
}
.p_price {
  color: #333;
  font-weight: 700;
  font-size: 14px;
}
.p_feed {
  max-width: 45%;
  padding-right: 18px;
  background: url(../../../assets/img/common/star_white.png) center right
    no-repeat;
  background-size: auto 100%;
  color: #999;
  overflow: hidden;
}
</style>